<template>
	<div class="app">
		<!-- tab-control -->
		<tab-control :titles="titles" @tab-item-click="tabItemClick"></tab-control>
		<!-- tab-content -->
		<h1>{{ pageContents[currentIndex] }}</h1>
	</div>
</template>

<script>
import TabControl from './components/TabControl.vue'
export default {
	data() {
		return {
			titles: ['衣服', '鞋子', '裤子'],
			pageContents: ['衣服列表', '鞋子列表', '裤子列表'],
			currentIndex: 0,
		}
	},
	components: {
		TabControl,
	},
	methods: {
		tabItemClick(index) {
			// console.log('index: ', index)
			this.currentIndex = index
		},
	},
}
</script>

<style scoped></style>
